<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({ name: 'assetsPlan'})">返回</el-button>
    </div>
    <el-steps
      style="display:flex; justify-content: center;"
      :space="200"
      :active="active"
      align-center
    >
      <el-step title="计划信息"></el-step>
      <el-step title="盘点任务"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-card shadow="never" :style="active === 1 ? cardStyle  : cardStyle1">
      <info-form
        @postData="handlePostData"
        @notSubmit="handleNotSubmit"
        v-show="active === 1"
        ref="infoForm"
      />
      <second-table
        @postData="handlePostData"
        @notSubmit="handleNotSubmit"
        v-show="active === 2"
        ref="secondTable"
      />
      <third-comp v-show="active === 3" ref="thirdComp" />
    </el-card>
    <div class="mt20" style="overflow: hidden">
      <el-button class="fl" type="primary" v-show="active > 1 && active < 3" @click="handlePre">上一步</el-button>
      <el-button class="fr" type="primary" v-show="active < 3" @click="handleNext">下一步</el-button>
      <!-- <el-button class="fr" type="primary" v-show="active === 4" @click="handleSubmit">提交</el-button> -->
    </div>
  </el-card>
</template>

<script>
import InfoForm from './infoForm'
import SecondTable from './SecondTable'
import ThirdComp from './ThirdComp'
import { checkPlanCreate } from '@/api/assetsNew'

export default {
  components: {
    InfoForm,
    SecondTable,
    ThirdComp
  },
  data() {
    return {
      cardStyle: {
        width: '800px',
        margin: '0 auto',
        border: 'none',
        overflow: 'inherit'
      },
      cardStyle1: {
        border: 'none'
      },
      planType: null,
      active: 1,
      param: {
        baseInfo: {},
        detailsInfo: []
      },
      first: true,
      second: true
    }
  },
  methods: {
    handlePostData(bool, obj, num) {
      if (num === 1) {
        this.first = bool
        this.$set(this.param, 'baseInfo', obj)
        this.planType = obj.planType
      } else if (num === 2) {
        this.second = bool
        obj.map(v => {
          v.checkUser = v.userName
          v.checkUserId = v.userId
        })
        this.$set(this.param, 'detailsInfo', obj)
      }
      console.log('param', this.param)
    },
    handleNotSubmit(num) {
      console.log('notSubmit', num)
      if (num === 1) {
        this.first = false
      } else if (num === 2) {
        this.second = false
      }
    },
    handlePre() {
      if (this.active === 2) {
        this.$refs.infoForm.showCategory()
      }
      this.active = this.active - 1
      if (this.active <= 1) {
        this.active = 1
      }
      console.log('active', this.active)
    },
    async handleNext() {
      // this.active += 1
      if (this.active === 1) {
        this.$refs.infoForm.postData()
        // 将基础信息选定的区域或部门传递给第二步
        if (this.first) {
          this.$refs.secondTable.setType(this.planType)
        }
      }
      if (this.active === 2) {
        this.$refs.secondTable.postData()
        if (this.first && this.second) {
          // 判断条件都验证通过了才能进行接口调用
          const res = await checkPlanCreate(this.param)
          if (res.state === '000000') {
            this.active += 1
            if (this.active >= 3) {
              this.active = 3
            }
            return false
          } else {
            return false
          }
        }
      }
      if (this.first && this.second) {
        this.active += 1
        if (this.active >= 3) {
          this.active = 3
        }
      }
    }
  }
}
</script>
